<!DOCTYPE html>
<html>

<head>
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
    <title>我姓李名乾坤</title>
    <script type="text/javascript">
        var docEl = document.documentElement,
            //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
            //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
            //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                //设置根字体大小
                docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
            };

        //绑定浏览器缩放与加载时间
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
        // 750px 设计图 => 750等分    clientWidth / 设计图尺寸
        // 0.01 rem = (clientWidth / 设计图尺寸) * 100
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
            background: white;
            margin-top: .01rem;
        }

        html,
        body {
            font-family: "微软雅黑";
            width: 100%;
            height: 100%;
            background: #E9E9E9;
        }

        .left {
            float: left;
        }

        .loan {
            width: 7.2rem;
        }

        .loan>li {
            width: 7.5rem;
            height: 1.99rem;
            border-bottom: 1px solid #E9E9E9;
        }

        .logoBox {
            width: 1.45rem;
            height: 1.57rem;
            padding-left: .3rem;
            padding-top: .4rem;
        }

        .logoBox>img {
            width: 1.17rem;
            height: 1.17rem;
        }

        .contentBox {
            width: 4.5rem;
            height: 1.17rem;
            padding-top: .4rem;
        }

        .Name {
            width: 4.5rem;
            height: .5rem;
            line-height: .5rem;
            font-size: .3rem;
            color: #333333;
        }

        .description {
            width: 4.5rem;
            height: .22rem;
            line-height: .22rem;
            font-size: .22rem;
            color: #666666;
            margin-bottom: .1rem;
        }

        .contentBox>span {
            padding: .05rem .06rem;
            font-size: .14rem;
            line-height: .14rem;
            color: #fc936d;
            background: #fff4f0;
            margin-right: .05rem;
        }

        .optBtn {
            width: 1.1rem;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            background: #FFFFFF;
            font-size: .22rem;
            color: #fc936d;
            margin-top: 1rem;
            border-radius: .1rem;
        }
    </style>
</head>

<body>
    <ul class="loan">
        <li id="paipaidai">
            <div class="logoBox left">
                <!-- ![](1.png) -->
            </div>
            <div class="contentBox left">
                <p class="Name">贴代码</p>
                <p class="description">贴代码，贴代码</p>
                <span class="left">贴代码</span>
                <span class="left">贴代码</span>
                <span class="left">贴代码</span>
            </div>
            <div class="optBtn left">喜欢代码</div>
        </li>
        <li id="paipaidai">
            <div class="logoBox left">
                <!-- ![](1.png) -->
            </div>
            <div class="contentBox left">
                <p class="Name">贴代码</p>
                <p class="description">贴代码，贴代码</p>
                <span class="left">贴代码</span>
                <span class="left">贴代码</span>
                <span class="left">贴代码</span>
            </div>
            <div class="optBtn left">喜欢代码</div>
        </li>
        <li id="paipaidai">
            <div class="logoBox left">
                <!-- ![](1.png) -->
            </div>
            <div class="contentBox left">
                <p class="Name">贴代码</p>
                <p class="description">贴代码，贴代码</p>
                <span class="left">贴代码</span>
                <span class="left">贴代码</span>
                <span class="left">贴代码</span>
            </div>
            <div class="optBtn left">喜欢代码</div>
        </li>
    </ul>
</body>

</html>